<template>
<div>
  <div class="box_table">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>年龄管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button plain size="medium" @click="addinit()" style="float: right;margin-bottom: 10px;margin-top: 10px">添加二级分类
    </el-button>
    <el-table :data="drandList" height="500" border row-key="id" style="width: 100%" :tree-props="{children: 'ageMinutes'}">
      <el-table-column prop="id" label="序号" width="80" sortable></el-table-column>
      <el-table-column prop="number" label="编号" width="120" sortable></el-table-column>
      <el-table-column prop="agegroup" label="所属年龄" width="130" sortable></el-table-column>
      <el-table-column label="三级分类字段" width="130" sortable>
        <template v-slot="s" >
          <span v-if="s.row.aid ==0">无</span>
          <el-button @click="clickSele(s.row.id)" circle v-if="s.row.aid !=0">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="show"
                       label="是否显示" width="100" sortable>
        <template slot-scope="scope">
          <!--switch 开关 组件-->
          <el-switch
              @change="alterSwitch(scope.row)"
              :active-value="true"
              :inactive-value="false"
              v-model="scope.row.show"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="intime" label="添加时间" width="195"></el-table-column>
      <el-table-column label="操作" width="240" >
        <template v-slot="s" >
          <span v-if="s.row.aid ==0">点开箭头操作子栏目项</span>
          <el-button type="primary" plain icon="el-icon-chat-dot-round" @click="clickSelect(s.row.id)" circle size="small" v-if="s.row.aid !=0"></el-button>
          <el-button type="primary" plain icon="el-icon-edit" @click="clickEditBtn(s.row)" circle size="small" v-if="s.row.aid !=0"></el-button>
          <el-button type="danger" plain icon="el-icon-delete" @click="clickDelBtn(s.row.id)" circle size="small" v-if="s.row.aid !=0"></el-button>
        </template>
      </el-table-column>
    </el-table>


    <div>
      <el-dialog title="添加年龄分类" :visible.sync="isShowAdd">
        <el-form :model="ageLimit">
          <el-form-item label="二级分类名称" :label-width="formLabelWidth" style="width: 500px">
            <el-input v-model="ageLimit.agegroup" autocomplete="off" placeholder="请输入二级分类字段"></el-input>
          </el-form-item>

          <el-form-item label="三级分类名称" :label-width="formLabelWidth" style="width: 500px">
            <el-input v-model="agePoint.agegroup" autocomplete="off" placeholder="请输入三级分类字段"></el-input>
          </el-form-item>

          <el-upload
              class="avatar-uploader"
              action="http://localhost:9527/age/upload"
              name="sceneImg"
              :show-file-list="false"
              ref="upload"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :auto-upload="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">点击上传场景图</i>
          </el-upload>
          <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem"
                     v-if="agePoint.agegroup.length!=0">添加
          </el-button>
          <el-button style="margin-left: 38.5%;" size="small" type="info" @click="alertWarning"
                     v-if="agePoint.agegroup.length==0">添加
          </el-button>
          <div class="agePointList" v-if="ageLimit.agePointList.length!=0">
            <el-row>
              <el-col :span="8" v-for="(item,i) in ageLimit.agePointList">
                <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                  <img :src="item.picUrl" class="image">
                  <div>
                    <p style="text-align: center">{{ item.agegroup}}</p>
                    <div class="bottom clearfix">
                      <center>
                        <el-button type="text" class="button" style="color: red;font-size: 12px" @click="delSceneChild(i)">
                          删除
                        </el-button>
                      </center>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

          </div>
          <div>
            请选择推荐品牌：
            <el-table
                :data="brand1"
                height="250"
                border
                style="width: 100%">
              <el-table-column
                  prop="brandCode"
                  label="编号"
                  width="303">
              </el-table-column>
              <el-table-column
                  prop="brandName"
                  label="名称"
                  width="303">
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="303">
                <template slot-scope="scope">
                  <el-button type="primary" plain icon="el-icon-minus" circle size="small"
                             @click="delBrand(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <br>
          <div>
            <el-form v-model="findBrands">
              品牌编号:
              <el-input v-model="findBrands.brandCode" style="width: 25%"></el-input>
              品牌名称:
              <el-input v-model="findBrands.brandName" style="width: 25%"></el-input>
              <el-button type="primary" plain @click="findBrand()">查找</el-button>
            </el-form>
          </div>
          <div>

            <el-table
                :data="brand"
                height="250"
                border
                style="width: 100%">
              <el-table-column
                  prop="brandCode"
                  label="编号"
                  width="303">
              </el-table-column>
              <el-table-column
                  prop="brandName"
                  label="名称"
                  width="303">
              </el-table-column>
              <el-table-column
                  label="是否关联"
                  width="303">
                <template slot-scope="scope">
                  <el-button type="primary" plain icon="el-icon-plus" circle size="small"
                             @click="addBrand(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShowAdd = false">取 消</el-button>
          <el-button type="primary" @click="suhmitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <el-dialog title="三级分类详情" :visible.sync="isSelectl" center width="37%">
      三级分类:
      <div class="HeZi" v-if="sortData!=0" >
        <el-row>
          <el-col :span="8" v-for="(item,i) in sortData">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
              <img :src="item.picUrl" class="image">
              <div>
                <p style="text-align: center">{{ item.agegroup}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      推荐品牌:
      <div class="HeZi" v-if="agebrand!=0" >
        <el-row>
          <el-col :span="8" v-for="(item,i) in agebrand">
            <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
              <img :src="item.imgUrl" class="image">
              <div>
                <p style="text-align: center">{{ item.brandName}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <div>
      <el-dialog title="添加三级分类" :visible.sync="isShowAge">
        <el-form :model="ageLimit">

          <el-form-item label="三级分类名称" :label-width="formLabelWidth" style="width: 500px">
            <el-input v-model="agePoint.agegroup" autocomplete="off" placeholder="请输入三级分类字段"></el-input>
          </el-form-item>

          <el-upload
              class="avatar-uploader"
              action="http://localhost:9527/age/upload"
              name="sceneImg"
              :show-file-list="false"
              ref="upload"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :auto-upload="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">点击上传场景图</i>
          </el-upload>
          <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem"
                     v-if="agePoint.agegroup.length!=0">添加
          </el-button>
          <el-button style="margin-left: 38.5%;" size="small" type="info" @click="alertWarning"
                     v-if="agePoint.agegroup.length==0">添加
          </el-button>
          <div class="agePointList" v-if="ageLimit.agePointList.length!=0">
            <el-row>
              <el-col :span="8" v-for="(item,i) in ageLimit.agePointList">
                <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                  <img :src="item.picUrl" class="image">
                  <div>
                    <p style="text-align: center">{{ item.agegroup}}</p>
                    <div class="bottom clearfix">
                      <center>
                        <el-button type="text" class="button" style="color: red;font-size: 12px" @click="delSceneChild(i)">
                          删除
                        </el-button>
                      </center>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShowAge = false">取 消</el-button>
          <el-button type="primary" @click="suhmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <el-dialog title="二级编辑" :visible.sync="isShowbrand" :close-on-click-modal="false" >
      <div>
        <div>
      <el-form label-width="80px">
        <el-form-item label="二级分类">
          <el-input v-model="commodity.agegroup" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="所属年龄">
          <el-select v-model="commodity.aid" placeholder="请选择年龄段">
            <el-option
                v-for="item in drandList"
                :key="item.id"
                :label="item.agegroup"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button @click.native.prevent="update">编辑</el-button>
        </el-form-item>
      </el-form>
        </div>
        三级分类:
        <div class="HeZi" v-if="sortData!=0" >
            <el-row>
              <el-button-group>
              <el-col :span="12" v-for="(item,i) in sortData">
                <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                  <img :src="item.picUrl" class="image">
                  <div>
                    <p style="text-align: center">{{ item.agegroup}}</p>
                      <div class="bottom clearfix">
                        <center>

                          <el-button type="text" class="button" style="color: red;font-size: 12px" @click="delScene(item.id)">
                            删除
                          </el-button>
                        </center>
                      </div>
                  </div>
                </el-card>
              </el-col>
              </el-button-group>
            </el-row>
          <el-button-group>
          <template v-slot="s" >
            <el-button @click.native.prevent="addAge()">添加</el-button>
          </template>
        </el-button-group>
        </div>

        推荐品牌:
        <div class="HeZi" v-if="agebrand!=0" >
          <el-row>
            <el-button-group>
            <el-col :span="8" v-for="(item,i) in agebrand">
              <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                <img :src="item.imgUrl" class="image">
                <div>
                  <p style="text-align: center">{{ item.brandName}}</p>
                </div>
              </el-card>
            </el-col>
            </el-button-group>
          </el-row>
        </div>
        <el-button-group>
        <template v-slot="s" >
          <el-button @click.native.prevent="updatebrand()">编辑</el-button>
        </template>
      </el-button-group>
      </div>
    </el-dialog>
    <div>
      <el-dialog title="修改品牌" :visible.sync="isSelectBrand" :close-on-click-modal="false">
        <div>
          请选择二级栏目推荐品牌：
          <el-table
              :data="brand1ById"
              height="250"
              border
              style="width: 100%">
            <el-table-column
                prop="brandCode"
                label="编号"
                >
            </el-table-column>
            <el-table-column
                prop="brandName"
                label="名称"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                >
              <template slot-scope="scope">
                <el-button type="primary" plain icon="el-icon-minus" circle size="small"
                           @click="updelBrand(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <br>
        <div>
          <el-form v-model="findBrands">
            品牌编号:
            <el-input v-model="findBrands.brandCode" style="width: 25%"></el-input>
            品牌名称:
            <el-input v-model="findBrands.brandName" style="width: 25%"></el-input>
            <el-button type="primary" plain @click="findBrandByid()">查找</el-button>
          </el-form>
        </div>
        <div>

          <el-table
              :data="brandById"
              height="250"
              border
              style="width: 100%">
            <el-table-column
                prop="brandCode"
                label="编号"
               >
            </el-table-column>
            <el-table-column
                prop="brandName"
                label="名称"
               >
            </el-table-column>
            <el-table-column
                label="是否关联"
               >
              <template slot-scope="scope">
                <el-button type="primary" plain icon="el-icon-plus" circle size="small"
                           @click="upaddBrand(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
            <el-button type="success" icon="el-icon-check" @click="updateColumn" circle></el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="查看二级分类" :visible.sync="isSelect" :close-on-click-modal="false">
        <el-descriptions class="margin-top" :data="commodityList" :column="1">
          <el-descriptions-item label="编号">
            {{commodityList.number}}
          </el-descriptions-item>
          <el-descriptions-item label="二级分类">
           {{commodityList.agegroup}}
          </el-descriptions-item>
          <el-descriptions-item label="所属年龄">
            {{commodityList.age}}
          </el-descriptions-item>
          <el-descriptions-item label="是否显示">
            <div v-if="commodityList.show==true">
              已显示
            </div>
            <div v-if="commodityList.show==false">
              未显示
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{commodityList.intime}}
          </el-descriptions-item>
          <el-descriptions-item label="其下分类">
            <el-tag v-for="item in commodityList.ageMinutes">
              {{item.age1}}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
    </el-dialog>


    <center>
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="drandList.page"
          :page-size="drandList.pageSize"
          layout="prev, pager, next"
          :total="drandList.total"
          style="position: fixed;left: 50%;top: 83%">
      </el-pagination>
    </center>
  </div>

</div>
</template>

<script>
export default {
  data(){
    return{
      drandList:[],
      commodityList:[],
      commodity:[],
      page:1,
      isSelect:false,
      isShowbrand:false,
      isSelectl:false,
      isShowAdd:false,
      isSelectBrand:false,
      isShowAge:false,
      formLabelWidth: '120px',
      brandId:"",
      imageUrl: "",

      ageLimit: {
        id:"",
        agePointList: [],
        agegroup: "",
        brands: []
      },agePoint: {
        agegroup: "",
        picUrl:"",
      },
      findBrands: {
        brandCode: "",
        brandName: "",
      },
      brand: [],
      brandById:[],
      brand1: [],
      brand1ById:[],
      aoptions:[],
      sortData:[],
      agebrand:[],
    }
  },
  created(){
    this.loadData()
    this.getAge()

  },
  methods:{
    loadData(){
      this.$axios.get("age/agelimit",{params:{page:this.page}}).then(res=>{
        this.drandList=res.data.data
        console.log(this.drandList);
      })
    },
    addAge(){
      this.ageLimit.agegroup = ""
      this.ageLimit.agePointList = []
      this.isShowAge=true
    },
    suhmit(){
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });
      this.$axios({
        method: "post",
        url: "scene/upload",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        this.ageLimit.id=this.brandId
        if(res.data.code == 200){
          for (let i = 0; i < this.ageLimit.agePointList.length; i++) {
            this.ageLimit.agePointList[i].picUrl = res.data.data[i]
          }this.$axios({
            method:"post",
            url:"age/addAge",
            data:this.ageLimit
          }).then(res=>{
            if (res.data.code==200) {
              this.$message({
                type: 'success',
                message: '创建分类成功!'
              });
              this.isShowAge = false
              this.ageLimit = {}
              this.ageLimit.agePointList=[]
              this.findBrands = {}
              this.getAgel(this.brandId)
            }
          })
        }
        this.brand.age
      })
    },
    delScene(id){
      console.log(this.brandId)
      this.$axios.get("age/delAge",{params:{id:id}}).then(res=>{
        this.getAgel(this.brandId)
      })
    },
    updateColumn(){
      this.ageLimit.brands = this.brand1ById
      this.ageLimit.id = this.brandId
      this.$axios({
        method: "post",
        url: "age/updaddAgebrand",
        data: this.ageLimit
      }).then(res => {
        this.ageLimit = {}
        this.ageLimit.agePointList=[]
        this.findBrands = {}
        this.getAgel(this.brandId)
        this.isSelectBrand=false

      })
    },
    updelBrand(data) {
      let index = this.brand1ById.indexOf(data)
      this.brand1ById.splice(index, 1)
      this.brandById.push(data)
    },
    upaddBrand(data) {
      let index = this.brandById.indexOf(data)
      console.log(index)
      this.brandById.splice(index, 1)
      this.brand1ById.push(data)
    },
    updatebrand(){
      this.isSelectBrand=true
      console.log(this.brandId)
      this.findBrandsByid(this.brandId)
    },
    findBrandsByid(id){
      this.$axios({
        method: "get",
        url: "age/getBrands",
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.brand1ById = res.data.data
          this.findBrandByid()
        }
      })

    },
    findBrandByid(){
      this.$axios({
        method: "post",
        url: "Column/findBrand",
        data: this.findBrands
      }).then(res => {
        this.brandById = []
        let bool;
        if (res.data.code == 200) {
          if (this.brand1ById.length > 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              for (let j = 0; j < this.brand1ById.length; j++) {
                bool = true;
                if (res.data.data[i].id == this.brand1ById[j].id) {
                  bool = false
                }
              }
              if (bool) {
                this.brandById.push(res.data.data[i]);
              }

            }
          } else {
            this.brandById = res.data.data
          }
          console.log(this.brandById)
        }
      })

    },


    alterSwitch(row){
      this.$axios.post("age/updAgelimit",{id:row.id,show:row.show}).then(res=>{
        this.$message({
          type: 'success',
          message: '你成功修改了显示!'
        });
      })
    },
    clickDelBtn(id){
      this.$confirm('确定要删除该场景', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        this.$axios.get("age/updage", {params: {id: id}}).then(res => {
          this.loadData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })
    },
    clickSelect(id){
      this.isSelect=true
      this.$axios.get("age/getAge",{params:{id:id}}).then(res=>{
        this.commodityList=res.data.data
      })
    },
    clickEditBtn(row){
      this.commodity=row
      this.brandId=row.id
      this.isShowbrand=true
      this.getAgel(row.id)
    },
    update(){
      this.$axios.post("age/updAgeLimit",this.commodity).then(res=>{
        this.isShowbrand=false
        this.$message({
          type: 'success',
          message: '成功编辑'
        });
      })
    },
    getAge(){
      this.$axios.get("age/getAgetPoints").then(res=>{
        this.aoptions=res.data.data
      })
    },
    getAgel(id){
      this.$axios.get("age/getAgeLim",{params:{id:id}}).then(res=>{
        this.sortData=res.data.data
      })
      this.$axios.get("age/getAgebrand",{params:{id:id}}).then(res=>{
        this.agebrand=res.data.data
      })
    },
    clickSele(id){
      this.isSelectl=true
      console.log(id)
      this.$axios.get("age/getAgeLim",{params:{id:id}}).then(res=>{
        this.sortData=res.data.data
      })
      this.$axios.get("age/getAgebrand",{params:{id:id}}).then(res=>{
        this.agebrand=res.data.data
      })
    },
    addinit(){
      this.ageLimit.agegroup = ""
      this.ageLimit.agePointList = []
      this.isShowAdd=true
      this.findBrand()
    },
    findBrand() {
      this.$axios({
        method: "post",
        url: "Column/findBrand",
        data: this.findBrands
      }).then(res => {
        let bool;
        if (res.data.code == 200) {
          if (this.brand1.length > 0) {
            debugger
            for (let i = 0; i < res.data.data.length; i++) {
              for (let j = 0; j < this.brand1.length; j++) {
                bool = true;
                if (res.data.data[i].brandCode == this.brand1[j].brandCode) {
                  bool = false
                }
              }
              if (bool) {
                this.brand.push(res.data.data[i]);
              }

            }
          } else {
            this.brand = res.data.data
          }
        }
      })

    },
    suhmitForm() {
      this.ageLimit.brands = this.brand1
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });
      this.$axios({
        method: "post",
        url: "scene/upload",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if(res.data.code == 200){
          for (let i = 0; i < this.ageLimit.agePointList.length; i++) {
            this.ageLimit.agePointList[i].picUrl = res.data.data[i]
          }this.$axios({
            method:"post",
            url:"age/addAgeLimit",
            data:this.ageLimit
          }).then(res=>{
            if (res.data.code==200) {
              this.$message({
                type: 'success',
                message: '创建分类成功!'
              });
              this.isShowAdd = false
              this.loadData()
            }
          })
        }
        this.brand.age
          })

    },
    addItem() {
    if (this.imageUrl.length != 0){
      this.agePoint.picUrl = this.imageUrl
      this.imageUrl = ""
      if (this.ageLimit.agePointList.length < 6) {
        this.ageLimit.agePointList.push(this.agePoint)
        this.agePoint = {agegroup: "", picUrl: ""}
      } else {
        this.agePoint = {agegroup: "", picUrl: ""}
        alert("最多添加6个")
        return
      }
    }else {
      alert("请选择图片")
    }
  },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.agePoint.picUrl = res.data
      }

    },
    handleChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // this.upFile.append("file",fileList)
      this.fileList = fileList
    },
    alertWarning() {
      alert("请输入三级分类名称")
    },
    delSceneChild(index) {
      this.ageLimit.agePointList.splice(index,1)
      this.fileList.splice(index,1)
    },
    delBrand(data) {
      let index = this.brand1.indexOf(data)
      this.brand1.splice(index, 1)
      this.brand.push(data)
    },

    addBrand(data) {
      let index = this.brand.indexOf(data)
      console.log(index)
      this.brand.splice(index, 1)
      this.brand1.push(data)
    },
    handleCurrentChange(val){
      this.page=val
      this.loadData()
    }

  }
}
</script>

<style>
.box_table{
  width: 95%;
  margin: 0 auto;
}
.HeZi {
  width: 90%;
  height: 50%;
  border: 1px none #000000;
  margin: 0 auto;
}
.agePointList {
  width: 50%;
  height: 50%;
  border: 1px solid #000000;
  margin: 0 auto;
}
</style>
